<template>
  <headPage></headPage>
  <div style="padding: .05rem">
    <el-tabs type="card" @tab-click="getInfo">
      <el-tab-pane label="审批">
        <div class="seach-wrap">
          <el-form :inline="true" ref="" :model="paramApprove" label-width="80px">
            <el-row :span="24">
              <el-col :span="5">
                <el-form-item label="审批状态:" label-width="100px">
                  <el-select
                      size="default"
                      v-model="paramApprove.status"
                      clearable
                      style="width: 120px"
                  >
                    <el-option
                        v-for="item in apply_status_option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                  <el-button type="primary" v-loading.fullscreen.lock="loading" @click="approve">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="padding: .1rem .2rem">
          <el-table
              :data="approveItems"
              stripe
              :header-cell-style="{background:'#F5F7FA',color:'#333333'}"
              style="width: 100%;"
          >
            <el-table-column
                prop="approveName"
                label="申请人"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="tableName"
                label="表中文名">
            </el-table-column>
            <el-table-column
                prop="tableCode"
                label="表英文名"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop=""
                label="状态"
                show-overflow-tooltip>
              <template #default="scope">
                {{apply_status_desc[scope.row.status]}}
              </template>
            </el-table-column>
            <el-table-column
                prop=""
                label="申请时间">
              <template #default="scope">
                {{mon(scope.row.creatime)}}
              </template>
            </el-table-column>
            <el-table-column
                prop="updator"
                label="审批人"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop=""
                label="审批时间">
              <template #default="scope">
                {{scope.row.updatime?mon(scope.row.updatime):''}}
              </template>
            </el-table-column>
            <el-table-column
                prop=""
                width="150"
                label="操作">
              <template #default="scope">
                <div v-if="scope.row.status=='2'">
                  <el-button type="primary" size="small" @click="getApprove(1,scope.row.id)">通过</el-button>
                  <el-button type="danger" size="small" @click="getApprove(0,scope.row.id)">拒绝</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              layout="prev, pager, next"
              @current-change="handleCurrentApprove"
              :current-page.sync="paramApprove.pageNo"
              :page-size="paramApprove.pageSize"
              :total="paramApprove.totalNum"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="申请">
        <div class="seach-wrap">
          <el-form :inline="true" ref="" :model="paramApply" label-width="80px">
            <el-row :span="24">
              <el-col :span="5">
                <el-form-item label="审批状态:" label-width="100px">
                  <el-select
                      size="default"
                      v-model="paramApply.status"
                      clearable
                      style="width: 120px"
                  >
                    <el-option
                        v-for="item in apply_status_option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                  <el-button type="primary" v-loading.fullscreen.lock="loading" @click="apply">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="padding: .1rem .2rem">
          <el-table
              :data="applyItems"
              stripe
              :header-cell-style="{background:'#F5F7FA',color:'#333333'}"
              style="width: 100%;"
          >
            <el-table-column
                prop="approveName"
                label="申请人"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="tableName"
                label="表中文名">
            </el-table-column>
            <el-table-column
                prop="tableCode"
                label="表英文名"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop=""
                label="状态"
                show-overflow-tooltip>
              <template #default="scope">
                {{apply_status_desc[scope.row.status]}}
              </template>
            </el-table-column>
            <el-table-column
                prop=""
                label="申请时间">
              <template #default="scope">
                {{mon(scope.row.creatime)}}
              </template>
            </el-table-column>
            <el-table-column
                prop="updator"
                label="审批人"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop=""
                label="审批时间">
              <template #default="scope">
                {{scope.row.updatime?mon(scope.row.updatime):''}}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              layout="prev, pager, next"
              @current-change="handleCurrentApply"
              :current-page.sync="paramApply.pageNo"
              :page-size="paramApply.pageSize"
              :total="paramApply.totalNum"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { myApply,myApprove,approve } from '@/api/chartdb'
import consts from '../../common/consts'
import headPage from '../ui/headPage.vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'

export default {
  name: 'log',
  components: {
    headPage
  },
  data(){
    return {
      apply_status_option:consts.apply_status_option,
      apply_status_desc:consts.apply_status_desc,
      paramApprove:{
        status:'2',
        pageNo:1,
        pageSize:10,
        totalNum:0,
      },
      paramApply:{
        status:'1',
        pageNo:1,
        pageSize:10,
        totalNum:0,
      },
      approveItems:[],
      applyItems:[],
      loading:false,
    }
  },
  mounted() {
    this.approve()
  },
  methods:{
    getInfo(e){
      if(e.props.label=="审批"){
        this.approve()
      }else {
        this.apply()
      }
    },
    mon(date){
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    search(){
      this.params.pageNo=1
      this.selectLogInfo();
    },
    approve(){
      myApprove(this.paramApprove).then((res) => {
        this.approveItems=res.data.data.data.records
        this.paramApprove.totalNum=res.data.data.data.total
        this.paramApprove.pageNo=res.data.data.data.current
        this.paramApprove.pageSize=res.data.data.data.size
        this.loading=false
      })
    },
    apply(){
      this.loading=true
      myApply(this.paramApply).then((res) => {
        this.applyItems=res.data.data.data.records
        this.paramApply.totalNum=res.data.data.data.total
        this.paramApply.pageNo=res.data.data.data.current
        this.paramApply.pageSize=res.data.data.data.size
        this.loading=false
      })
    },
    getApprove(status,id){
      this.$confirm('是否审批?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param={
          id:id,
          status:status
        }
        approve(param).then((res) => {
          ElMessage({
            showClose: true,
            message: '审批成功！',
            type: 'success',
          })
          this.approve()
        })
      }).catch(() => {
      });
    },
    handleCurrentApprove:function (pageNo) {
      var vm = this;
      vm.paramApprove.pageNo = pageNo;
      vm.approve();
    },
    handleCurrentApply:function (pageNo) {
      var vm = this;
      vm.paramApply.pageNo = pageNo;
      vm.apply();
    },
  }
}
</script>

<style lang="scss" scoped>
.seach-wrap{
  /*height: 0.5rem;*/
  /*display: flex;*/
  /*align-items: center;*/
  /*margin: 0.1rem 0.5rem;*/
  border-bottom: 1px solid #f1f1f1;
  /*justify-content: center;*/
  margin-top: 20px;
}
.el-pagination.is-background .el-pager li{
  margin-bottom: 0px !important;
}
.el-pagination{
  display: flex;
  align-items: center;
  margin-top: 5px;
  justify-content: flex-end;
}

</style>